Device Permissions এবং Camera/Media Access

React Native মোবাইল অ্যাপ্লিকেশনে Device Permissions এবং Camera/Media Access প্রয়োজনীয় ফিচারগুলির একটি গুরুত্বপূর্ণ অংশ। অ্যাপ্লিকেশনের মধ্যে ব্যবহারকারী ডিভাইসের বিভিন্ন ফিচার (যেমন ক্যামেরা, গ্যালারি, অবস্থান, মাইক্রোফোন) ব্যবহার করতে হলে, আপনাকে সেগুলোর জন্য অনুমতি নিতে হয়। React Native-এ এই অনুমতিগুলি পরিচালনা করার জন্য কিছু বিশেষ লাইব্রেরি এবং APIs রয়েছে।

Device Permissions

যেকোনো মোবাইল অ্যাপ্লিকেশনে ব্যবহারকারীর ডিভাইসের সেন্সর, ক্যামেরা, গ্যালারি, লোকেশন, ইত্যাদি অ্যাক্সেস করতে গেলে device permissions নেয়া প্রয়োজন। React Native-এ React Native Permissions বা React Native Permissions Manager ব্যবহার করে আপনি সহজেই পেরমিশন ম্যানেজমেন্ট করতে পারেন।

React Native Permissions লাইব্রেরি

এটি ব্যবহার করে আপনি ক্যামেরা, মাইক্রোফোন, লোকেশন, কনট্যাক্ট, ইত্যাদি থেকে পেরমিশন চাইতে পারেন এবং ব্যবহারকারীর অনুমতি গ্রহণ/অস্বীকার করার উপর ভিত্তি করে অ্যাপের কার্যক্রম নির্ধারণ করতে পারেন।

ইনস্টলেশন:

npm install react-native-permissions

এবং প্রয়োজনীয় লিঙ্কিং করার জন্য:

npx react-native link react-native-permissions

ব্যবহার উদাহরণ (Camera Permission)

import React, { useState } from 'react';
import { View, Button, Text } from 'react-native';
import { request, PERMISSIONS, RESULTS } from 'react-native-permissions';

const App = () => {
  const [permissionStatus, setPermissionStatus] = useState(null);

  const requestCameraPermission = async () => {
    const result = await request(PERMISSIONS.ANDROID.CAMERA); // for Android
    // const result = await request(PERMISSIONS.IOS.CAMERA); // for iOS
    if (result === RESULTS.GRANTED) {
      setPermissionStatus('Camera Permission Granted');
    } else {
      setPermissionStatus('Camera Permission Denied');
    }
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="Request Camera Permission" onPress={requestCameraPermission} />
      <Text>{permissionStatus}</Text>
    </View>
  );
};

export default App;

এখানে, request() মেথড ব্যবহার করে ক্যামেরার পেরমিশন চাওয়া হচ্ছে। PERMISSIONS.ANDROID.CAMERA বা PERMISSIONS.IOS.CAMERA এর মাধ্যমে নির্দিষ্ট প্ল্যাটফর্মের ক্যামেরার অনুমতি চাওয়া হয়।

Camera/Media Access

React Native-এ Camera এবং Media অ্যাক্সেস করতে হলে, আপনাকে ডিভাইসের ক্যামেরা, গ্যালারি এবং মিডিয়া ফাইলসের জন্য পেরমিশন নিতে হয়। এর জন্য React Native Camera এবং React Native Image Picker এর মতো লাইব্রেরি ব্যবহৃত হয়।

React Native Camera লাইব্রেরি

এটি ক্যামেরা ব্যবহার করতে একটি খুবই জনপ্রিয় লাইব্রেরি, যার মাধ্যমে আপনি ছবি তোলা, ভিডিও রেকর্ডিং, বারকোড স্ক্যানিং ইত্যাদি করতে পারেন।

ইনস্টলেশন:

npm install react-native-camera

ব্যবহার উদাহরণ (Camera Access)

import React from 'react';
import { View, Button, Text } from 'react-native';
import { RNCamera } from 'react-native-camera';

const App = () => {
  let camera;

  const takePicture = async () => {
    if (camera) {
      const data = await camera.takePictureAsync();
      console.log(data.uri); // captured image URI
    }
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <RNCamera
        style={{ width: '100%', height: 400 }}
        ref={(ref) => { camera = ref; }}
        type={RNCamera.Constants.Type.back}
        flashMode={RNCamera.Constants.FlashMode.on}
      >
        <Button title="Take Picture" onPress={takePicture} />
      </RNCamera>
    </View>
  );
};

export default App;

এখানে RNCamera কম্পোনেন্ট ব্যবহার করা হয়েছে, যার মাধ্যমে ক্যামেরা অ্যাক্সেস এবং ছবি তোলা সম্ভব হচ্ছে।

React Native Image Picker (Media Access)

এটি ব্যবহার করে আপনি গ্যালারি থেকে ছবি বা ভিডিও নির্বাচন করতে পারেন।

ইনস্টলেশন:

npm install react-native-image-picker

ব্যবহার উদাহরণ (Image Picker)

import React, { useState } from 'react';
import { View, Button, Text, Image } from 'react-native';
import { launchImageLibrary } from 'react-native-image-picker';

const App = () => {
  const [imageUri, setImageUri] = useState(null);

  const pickImage = () => {
    launchImageLibrary({ mediaType: 'photo' }, (response) => {
      if (response.didCancel) {
        console.log('User cancelled image picker');
      } else if (response.errorCode) {
        console.log('ImagePicker Error: ', response.errorMessage);
      } else {
        setImageUri(response.assets[0].uri);
      }
    });
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="Pick an Image" onPress={pickImage} />
      {imageUri && <Image source={{ uri: imageUri }} style={{ width: 200, height: 200 }} />}
    </View>
  );
};

export default App;

এখানে, launchImageLibrary() মেথড ব্যবহার করে গ্যালারি থেকে ছবি নির্বাচন করা হচ্ছে।

Platform Specific Permissions

যেহেতু Android এবং iOS এর পারমিশন ম্যানেজমেন্ট আলাদা, তাই আপনি প্রতিটি প্ল্যাটফর্মের জন্য আলাদা পেরমিশন রিকোয়েস্ট করতে হবে। উদাহরণস্বরূপ:

• Android: AndroidManifest.xml এ পারমিশন অ্যাড করা লাগে, যেমন CAMERA এবং READ_EXTERNAL_STORAGE।
• iOS: Info.plist ফাইলে পারমিশন স্টেটমেন্ট অ্যাড করা হয়, যেমন NSCameraUsageDescription এবং NSPhotoLibraryUsageDescription।

Android Example (AndroidManifest.xml)

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

iOS Example (Info.plist)

<key>NSCameraUsageDescription</key>
<string>We need camera access to take photos</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>We need access to your photo library</string>

সারাংশ

• Device Permissions এর জন্য React Native-এ react-native-permissions ব্যবহার করা হয়, যার মাধ্যমে ক্যামেরা, লোকেশন, গ্যালারি, মাইক্রোফোন ইত্যাদি অ্যাক্সেসের জন্য অনুমতি নেয়া যায়।
• Camera and Media Access এর জন্য React Native Camera এবং React Native Image Picker এর মতো লাইব্রেরি ব্যবহৃত হয়, যা ক্যামেরা এবং মিডিয়া ফাইলের জন্য অ্যাক্সেস দেয়।
• Android এবং iOS উভয় প্ল্যাটফর্মের জন্য আলাদা পারমিশন ফাইল (যেমন AndroidManifest.xml এবং Info.plist) কনফিগার করতে হয়।

React Native তে Permissions API ব্যবহার করে আপনি ব্যবহারকারীর ডিভাইস থেকে বিভিন্ন ধরনের অনুমতি (permissions) সংগ্রহ করতে পারেন, যেমন ক্যামেরা, GPS, স্টোরেজ, মাইক্রোফোন ইত্যাদি। React Native তে permissions ব্যবস্থাপনা করার জন্য react-native-permissions প্যাকেজটি সবচেয়ে জনপ্রিয় এবং ব্যবহারযোগ্য প্যাকেজ।

এই প্যাকেজটি ব্যবহার করে আপনি অনুমতি চাওয়ার আগে সেগুলি পরীক্ষা করতে এবং অনুমতি না পাওয়া সত্ত্বেও কিভাবে পরবর্তী পদক্ষেপ নিতে হবে তা পরিচালনা করতে পারেন।

react-native-permissions প্যাকেজ ব্যবহার

react-native-permissions প্যাকেজটি React Native অ্যাপে বিভিন্ন ধরনের permissions চাওয়া এবং পরিচালনা করতে ব্যবহৃত হয়। এটি সঠিক permission চাওয়ার পদ্ধতি এবং তার পরবর্তী পরিচালনা (যেমন, কিভাবে ব্যবহারকারীর প্রতিক্রিয়া চাওয়া হয় এবং কোনটি গ্রহণ করা হয়) সহজ করে তোলে।

প্যাকেজ ইনস্টলেশন

প্রথমে আপনাকে react-native-permissions প্যাকেজটি ইনস্টল করতে হবে:

npm install react-native-permissions

যদি আপনি CocoaPods ব্যবহার করেন (iOS এর জন্য), তবে আপনাকে Pods ইনস্টল করতে হবে:

cd ios && pod install

Permissions চাওয়া এবং পরিচালনা

React Native তে permissions চাওয়া সাধারণত এই তিনটি ধাপে ঘটে:

1. Permissions চাওয়া – ডিভাইসের নির্দিষ্ট permission চাওয়া।
2. Permission চেক করা – অনুমতি দেওয়া হয়েছে কি না তা চেক করা।
3. Permission প্রাপ্তির পর অ্যাকশন – অনুমতি পাওয়া গেলে আপনি সেই ফিচারটি ব্যবহার করতে পারবেন।

Permission চেক এবং রিকুয়েস্ট করার উদাহরণ

নিচে একটি উদাহরণ দেওয়া হয়েছে যেখানে ক্যামেরা এবং লোকেশন permission চাওয়া হয়েছে।

import React, { useEffect, useState } from 'react';
import { View, Text, Button } from 'react-native';
import { check, request, PERMISSIONS, RESULTS } from 'react-native-permissions';

const App = () => {
  const [cameraPermission, setCameraPermission] = useState(null);
  const [locationPermission, setLocationPermission] = useState(null);

  // ক্যামেরার পারমিশন চেক এবং রিকুয়েস্ট করা
  const checkCameraPermission = async () => {
    const result = await check(PERMISSIONS.IOS.CAMERA);
    setCameraPermission(result);
  };

  const requestCameraPermission = async () => {
    const result = await request(PERMISSIONS.IOS.CAMERA);
    setCameraPermission(result);
  };

  // লোকেশনের পারমিশন চেক এবং রিকুয়েস্ট করা
  const checkLocationPermission = async () => {
    const result = await check(PERMISSIONS.IOS.LOCATION_WHEN_IN_USE);
    setLocationPermission(result);
  };

  const requestLocationPermission = async () => {
    const result = await request(PERMISSIONS.IOS.LOCATION_WHEN_IN_USE);
    setLocationPermission(result);
  };

  useEffect(() => {
    checkCameraPermission();
    checkLocationPermission();
  }, []);

  return (
    <View style={{ marginTop: 50 }}>
      <Text>Camera Permission: {cameraPermission}</Text>
      <Button
        title="Request Camera Permission"
        onPress={requestCameraPermission}
      />
      <Text>Location Permission: {locationPermission}</Text>
      <Button
        title="Request Location Permission"
        onPress={requestLocationPermission}
      />
    </View>
  );
};

export default App;

ব্যাখ্যা:

1. check() ফাংশনটি ব্যবহার করা হয় একটি নির্দিষ্ট permission এর স্ট্যাটাস চেক করার জন্য। এটি RESULTS.GRANTED, RESULTS.DENIED, বা RESULTS.BLOCKED এর মধ্যে একটিকে ফিরিয়ে দেয়।
2. request() ফাংশনটি ব্যবহারকারীর অনুমতি চাওয়ার জন্য ব্যবহৃত হয়। এটি RESULTS.GRANTED বা RESULTS.DENIED ফেরত দেয়।
3. এখানে ক্যামেরা এবং লোকেশন permission চাওয়া এবং চেক করা হয়েছে। এই উদাহরণে, ক্যামেরা এবং লোকেশন permissions শুধুমাত্র iOS এর জন্য দেখানো হয়েছে। Android-এর জন্য PERMISSIONS.ANDROID.CAMERA এবং PERMISSIONS.ANDROID.ACCESS_FINE_LOCATION ব্যবহার করা হবে।

অনুমতি চেকের ফলাফল

react-native-permissions আপনাকে কিছু ভিন্ন ফলাফল প্রদান করে, যার মধ্যে রয়েছে:

• RESULTS.GRANTED: Permission দেওয়া হয়েছে, এবং অ্যাপ্লিকেশনটি সেই ফিচারটি ব্যবহার করতে সক্ষম।
• RESULTS.DENIED: Permission অস্বীকার করা হয়েছে, তবে এটি আবার চাওয়া যেতে পারে।
• RESULTS.BLOCKED: Permission স্থায়ীভাবে অস্বীকার করা হয়েছে, এবং এটি আর চাওয়া যাবে না।
• RESULTS.UNAVAILABLE: Permission সিস্টেমে উপলব্ধ নয় (অথবা device এর জন্য উপযোগী নয়)।

পারমিশন এর পরবর্তী পদক্ষেপ

1. Permission Granted হলে: যদি permission দেওয়া হয়, তখন আপনি সেই ফিচারটি ব্যবহার করতে পারেন, যেমন ক্যামেরা বা লোকেশন সেবা।
2. Permission Denied হলে: আপনি ব্যবহারকারীকে অনুরোধ করতে পারেন permission দেওয়ার জন্য, অথবা এড়িয়ে যেতে পারেন এবং অ্যাপের কিছু ফিচার নিষ্ক্রিয় রাখতে পারেন।

অন্য গুরুত্বপূর্ণ Permissions

react-native-permissions প্যাকেজটি আরও অনেক ধরনের permissions সমর্থন করে, যেমন:

• Camera: PERMISSIONS.IOS.CAMERA, PERMISSIONS.ANDROID.CAMERA
• Location: PERMISSIONS.IOS.LOCATION_WHEN_IN_USE, PERMISSIONS.ANDROID.ACCESS_FINE_LOCATION
• Microphone: PERMISSIONS.IOS.MICROPHONE, PERMISSIONS.ANDROID.RECORD_AUDIO
• Storage: PERMISSIONS.ANDROID.READ_EXTERNAL_STORAGE, PERMISSIONS.ANDROID.WRITE_EXTERNAL_STORAGE
• Notifications: PERMISSIONS.IOS.NOTIFICATIONS, PERMISSIONS.ANDROID.NOTIFICATIONS

সারাংশ

React Native তে react-native-permissions প্যাকেজ ব্যবহার করে আপনি ডিভাইসের বিভিন্ন ধরনের permissions সহজে চেক এবং রিকুয়েস্ট করতে পারেন। এটি ব্যবহারকারীর অনুমতি নেওয়ার জন্য একটি সোজা এবং কার্যকরী উপায় প্রদান করে এবং আপনাকে অ্যাপ্লিকেশনের জন্য সঠিক permissions ব্যবস্থা করতে সাহায্য করে।

React Native-এ মোবাইল অ্যাপ্লিকেশনগুলিতে ছবি তোলা এবং ছবি নির্বাচন করার জন্য Camera এবং Image Picker বেশ গুরুত্বপূর্ণ ফিচার। এই ফিচারগুলি আপনাকে ডিভাইসের ক্যামেরা বা গ্যালারি অ্যাক্সেস করতে এবং ব্যবহারকারীদের ছবি আপলোড করতে সহায়তা করে।

Camera ব্যবহার (React Native Camera)

React Native-এ ক্যামেরা অ্যাক্সেস করার জন্য react-native-camera বা expo-camera প্যাকেজ ব্যবহার করা হয়। ক্যামেরা ব্যবহার করে আপনি ছবি তুলতে, ভিডিও রেকর্ড করতে, বারকোড স্ক্যান করতে এবং আরও অনেক কিছু করতে পারেন।

Installation (react-native-camera)

1. প্রথমে react-native-camera প্যাকেজটি ইনস্টল করুন:

   npm install react-native-camera --save

   অথবা, যদি আপনি Expo ব্যবহার করেন:

   expo install expo-camera

2. তারপর ক্যামেরা অ্যাক্সেসের জন্য অনুমতি সেটআপ করুন (Android এবং iOS এর জন্য)।

ব্যবহার (react-native-camera)

import React, { useState, useEffect } from 'react';
import { View, Button, Text, StyleSheet } from 'react-native';
import { Camera } from 'react-native-camera';

const CameraApp = () => {
  const [camera, setCamera] = useState(null);
  const [photoUri, setPhotoUri] = useState(null);

  const takePhoto = async () => {
    if (camera) {
      const data = await camera.takePictureAsync();
      setPhotoUri(data.uri);
    }
  };

  return (
    <View style={styles.container}>
      {photoUri ? (
        <Image source={{ uri: photoUri }} style={styles.photo} />
      ) : (
        <Camera
          style={styles.camera}
          type={Camera.Constants.Type.back}
          ref={(ref) => setCamera(ref)}
        >
          <Button title="Take Photo" onPress={takePhoto} />
        </Camera>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  camera: {
    width: '100%',
    height: '100%',
  },
  photo: {
    width: 300,
    height: 300,
    marginBottom: 20,
  },
});

export default CameraApp;

ব্যাখ্যা:

• Camera: এটি ক্যামেরা ইন্টারফেস তৈরি করতে ব্যবহৃত হয়।
• takePictureAsync(): এটি ব্যবহারকারীর ছবি নেওয়ার জন্য ব্যবহৃত হয় এবং ছবি তোলার পর uri পাওয়া যায়।

Image Picker ব্যবহার (Image Picker Library)

React Native-এ Image Picker ব্যবহার করতে, আপনি react-native-image-picker বা expo-image-picker ব্যবহার করতে পারেন। এটি ব্যবহারকারীদের ছবি অথবা ভিডিও নির্বাচন করতে সহায়ক, যা পরে অ্যাপের মধ্যে ব্যবহার করা যাবে।

Installation (react-native-image-picker)

1. প্রথমে react-native-image-picker প্যাকেজটি ইনস্টল করুন:

   npm install react-native-image-picker --save

   অথবা, যদি আপনি Expo ব্যবহার করেন:

   expo install expo-image-picker

ব্যবহার (react-native-image-picker)

import React, { useState } from 'react';
import { View, Button, Image, StyleSheet } from 'react-native';
import * as ImagePicker from 'expo-image-picker';

const ImagePickerApp = () => {
  const [image, setImage] = useState(null);

  const pickImage = async () => {
    const result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
      allowsEditing: true,
      quality: 1,
    });

    if (!result.cancelled) {
      setImage(result.uri);
    }
  };

  return (
    <View style={styles.container}>
      <Button title="Pick an image from gallery" onPress={pickImage} />
      {image && <Image source={{ uri: image }} style={styles.image} />}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  image: {
    width: 200,
    height: 200,
    marginTop: 20,
  },
});

export default ImagePickerApp;

ব্যাখ্যা:

• launchImageLibraryAsync(): এটি ব্যবহারকারীর গ্যালারি থেকে ছবি নির্বাচন করতে ব্যবহৃত হয়।
• mediaTypes: ImagePicker.MediaTypeOptions.Images: এটি শুধুমাত্র ছবি নির্বাচন করতে অনুমতি দেয়।
• quality: 1: এটি ছবির গুণমান নিয়ন্ত্রণ করতে সহায়ক।

Camera এবং Image Picker এর মধ্যে পার্থক্য

সারাংশ

• Camera এবং Image Picker উভয়ই মোবাইল অ্যাপে ছবি বা ভিডিও ব্যবস্থাপনা করতে সহায়ক।
• Camera ব্যবহারকারীদের ছবি তোলার জন্য ব্যবহৃত হয়, যেখানে Image Picker গ্যালারি থেকে ছবি বা ভিডিও নির্বাচন করতে ব্যবহৃত হয়।
• আপনি expo-image-picker বা react-native-image-picker লাইব্রেরি ব্যবহার করতে পারেন, এবং তাদের API দ্বারা ক্যামেরা এবং গ্যালারি অ্যাক্সেস পরিচালনা করতে পারবেন।

এটি আপনাকে ব্যবহারকারীদের জন্য ছবি বা ভিডিও গ্রহণ করার একটি কার্যকরী এবং ইন্টারেক্টিভ পদ্ধতি প্রদান করে।

React Native Video একটি জনপ্রিয় লাইব্রেরি যা React Native অ্যাপ্লিকেশনে ভিডিও প্লেব্যাক ফিচার যোগ করতে ব্যবহৃত হয়। এটি ভিডিও স্ট্রিমিং, ভিডিও প্লেব্যাক, এবং কাস্টম কন্ট্রোলার যোগ করার জন্য অত্যন্ত কার্যকরী।

React Native Video লাইব্রেরি ব্যবহার করে আপনি ভিডিও ফাইলগুলি প্লে, পজ, স্কিপ এবং বিভিন্ন প্লে কন্ট্রোল কার্যক্রম সম্পাদন করতে পারেন। এই লাইব্রেরি বিভিন্ন ফিচার সাপোর্ট করে, যেমন fullscreen, auto-play, loop, controls, seek ইত্যাদি।

React Native Video ইনস্টলেশন

প্রথমে, React Native Video ইনস্টল করতে হবে:

npm install react-native-video

অথবা,

yarn add react-native-video

Post-installation steps: React Native Video লাইব্রেরি ব্যবহারের জন্য কিছু নির্দিষ্ট configuration প্রয়োজন হতে পারে, যেমন Android এবং iOS প্ল্যাটফর্মের জন্য নির্দিষ্ট সেটআপ। আপনি এই সেটআপ গুলি React Native Video Documentation থেকে জানতে পারবেন।

React Native Video ব্যবহার

এখানে React Native Video দিয়ে ভিডিও প্লেব্যাক করার একটি সাধারণ উদাহরণ দেওয়া হলো:

উদাহরণ: ভিডিও প্লেব্যাক

import React from 'react';
import { View, StyleSheet } from 'react-native';
import Video from 'react-native-video';

const App = () => {
  return (
    <View style={styles.container}>
      <Video
        source={{uri: 'https://www.w3schools.com/html/mov_bbb.mp4'}}
        ref={(ref) => {
          this.player = ref;
        }}
        onBuffer={this.onBuffer}
        onError={this.videoError}
        style={styles.backgroundVideo}
        controls={true} // Show video controls
        resizeMode="contain" // Resize mode
        repeat={true} // Loop the video
        onEnd={() => console.log('Video Ended')} // Event when video ends
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#000',
  },
  backgroundVideo: {
    width: '100%',
    height: '100%',
  },
});

export default App;

ব্যাখ্যা:

1. source: এখানে source প্রপ ব্যবহার করা হয়েছে ভিডিও ফাইলের লোকেশন বা URL সেট করার জন্য। আপনি local video files বা remote URLs ব্যবহার করতে পারেন।
2. controls: এই প্রপটি true দিলে ভিডিও কন্ট্রোল (প্লে, পজ, স্কিপ) দেখাবে। আপনি চাইলে নিজস্ব কন্ট্রোলও তৈরি করতে পারেন।
3. resizeMode: ভিডিও স্কেল করার জন্য resizeMode ব্যবহার করতে পারেন। এখানে "contain" ব্যবহার করা হয়েছে, যা ভিডিওর পুরোটা দেখাবে স্ক্রীনে সামঞ্জস্য রেখে।
4. repeat: ভিডিওটি যদি শেষ হয়ে যায়, তাহলে এটি পুনরায় শুরু হবে। এর মান true হলে ভিডিও লুপ হবে।
5. onEnd: ভিডিও শেষ হলে এটি একটি ইভেন্ট ট্রিগার করবে, যেখানে আপনি প্রয়োজনীয় কাজ করতে পারেন, যেমন লোগিং বা অন্য কোনো কার্যক্রম।

অতিরিক্ত ফিচারসমূহ:

1. Auto Play:
   আপনি যদি ভিডিওটি auto-play করতে চান, তবে paused={false} প্রপটি ব্যবহার করতে পারেন।

<Video
  source={{uri: 'https://www.w3schools.com/html/mov_bbb.mp4'}}
  paused={false}  // Auto play the video
  style={styles.backgroundVideo}
/>

2. Video Controls Customization:
   যদি আপনি custom video controls চান, তবে controls প্রপটি false সেট করে নিজস্ব কন্ট্রোল তৈরি করতে পারবেন। উদাহরণস্বরূপ, প্লে/পজ বাটন এবং ভলিউম কন্ট্রোল যোগ করতে পারেন।
3. Seek/Progress:
   ভিডিওর সময়ের সাথে সাথে প্রগ্রেস ট্র্যাক করার জন্য onProgress এবং seek ফিচার ব্যবহার করা যেতে পারে।

<Video
  source={{uri: 'https://www.w3schools.com/html/mov_bbb.mp4'}}
  onProgress={(data) => console.log(data)} // Shows progress
  onEnd={() => console.log('Video Ended')}
  style={styles.backgroundVideo}
/>

4. Fullscreen:
   React Native Video দিয়ে আপনি ভিডিওটি পূর্ণ স্ক্রীনে দেখতে পারেন। আপনি resizeMode এবং onFullscreenPlayerWillPresent ইভেন্ট হ্যান্ডলার ব্যবহার করে এই ফিচারটি অ্যাক্টিভেট করতে পারেন।

<Video
  source={{uri: 'https://www.w3schools.com/html/mov_bbb.mp4'}}
  resizeMode="cover"
  style={styles.backgroundVideo}
  onFullscreenPlayerWillPresent={() => console.log('Fullscreen Mode Activated')}
/>

সারাংশ

React Native Video লাইব্রেরি ভিডিও প্লেব্যাক ফিচার যুক্ত করার জন্য একটি শক্তিশালী টুল। এটি remote, local ভিডিও প্লেব্যাক, controls, auto-play, looping, seek, এবং fullscreen সহ নানা ধরনের ফিচার সাপোর্ট করে। আপনি ভিডিও প্লেব্যাকের অভিজ্ঞতা কাস্টমাইজ করতে চাইলে এটি আপনাকে অনেক স্বাধীনতা প্রদান করে।

React Native-এ audio এবং media প্লেব্যাক ম্যানেজমেন্টের জন্য বিভিন্ন প্যাকেজ এবং API রয়েছে, যা আপনাকে অডিও এবং ভিডিও প্লেব্যাক সুষ্ঠুভাবে পরিচালনা করতে সাহায্য করে। এগুলি ব্যবহারের মাধ্যমে আপনি অডিও ফাইল প্লে, পজ, পজিশন ট্র্যাকিং, লুপিং, ভলিউম কন্ট্রোল, এবং অন্যান্য প্লেব্যাক কাস্টমাইজেশন করতে পারবেন।

এখানে দুটি জনপ্রিয় প্যাকেজের মাধ্যমে অডিও এবং মিডিয়া প্লেব্যাক পরিচালনা করা হবে:

1. react-native-sound - অডিও প্লেব্যাক ম্যানেজমেন্টের জন্য একটি সহজ প্যাকেজ।
2. react-native-video - ভিডিও প্লেব্যাক এবং কাস্টমাইজেশন জন্য একটি শক্তিশালী লাইব্রেরি।

১. react-native-sound (অডিও প্লেব্যাক)

react-native-sound প্যাকেজটি React Native অ্যাপে অডিও ফাইল প্লে করার জন্য ব্যবহৃত হয়। এটি বিভিন্ন অডিও ফরম্যাট যেমন MP3, WAV ইত্যাদি প্লে করতে সহায়ক।

ইনস্টলেশন

প্রথমে আপনাকে react-native-sound প্যাকেজটি ইনস্টল করতে হবে।

npm install react-native-sound

অডিও প্লেব্যাক উদাহরণ

import React, { useState } from 'react';
import { View, Button } from 'react-native';
import Sound from 'react-native-sound';

// অডিও ফাইলটি লোড করতে হবে
Sound.setCategory('Playback');

const AudioPlayer = () => {
  const [sound, setSound] = useState(null);

  const playSound = () => {
    const whoosh = new Sound('audio_file.mp3', Sound.MAIN_BUNDLE, (error) => {
      if (error) {
        console.log('Error loading sound', error);
        return;
      }
      // অডিও প্লে
      whoosh.play((success) => {
        if (success) {
          console.log('Finished playing!');
        } else {
          console.log('Playback failed');
        }
      });
    });

    setSound(whoosh);
  };

  const stopSound = () => {
    if (sound) {
      sound.stop(() => {
        console.log('Stopped sound');
      });
    }
  };

  return (
    <View>
      <Button title="Play Sound" onPress={playSound} />
      <Button title="Stop Sound" onPress={stopSound} />
    </View>
  );
};

export default AudioPlayer;

ব্যাখ্যা:

• Sound ক্লাসটি অডিও প্লেব্যাক পরিচালনা করে।
• playSound ফাংশনটি অডিও প্লে করার জন্য ব্যবহার করা হয়।
• stopSound ফাংশনটি অডিও থামানোর জন্য ব্যবহৃত হয়।

২. react-native-video (ভিডিও প্লেব্যাক)

react-native-video লাইব্রেরিটি React Native অ্যাপে ভিডিও প্লেব্যাক ম্যানেজ করতে ব্যবহৃত হয়। এটি ভিডিও প্লে, পজ, পজিশন ট্র্যাকিং, ভলিউম কন্ট্রোল, ইত্যাদি সহ বিভিন্ন কাস্টমাইজেশন সহ ভিডিও প্লেব্যাক পরিচালনা করে।

ইনস্টলেশন

npm install react-native-video

ভিডিও প্লেব্যাক উদাহরণ

import React from 'react';
import { View, StyleSheet } from 'react-native';
import Video from 'react-native-video';

const VideoPlayer = () => {
  return (
    <View style={styles.container}>
      <Video
        source={{ uri: 'https://www.example.com/video.mp4' }} // ভিডিও সোর্স
        ref={(ref) => {
          this.player = ref;
        }}
        onBuffer={() => console.log('buffering')}
        onError={(error) => console.log('video error', error)}
        controls={true} // ভিডিও কন্ট্রোলস দেখাবে
        style={styles.backgroundVideo}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  backgroundVideo: {
    width: '100%',
    height: 200,
  },
});

export default VideoPlayer;

ব্যাখ্যা:

• source প্রপটি ভিডিও সোর্স (URL বা লোকাল ফাইল) নির্দেশ করে।
• controls প্রপটি ভিডিও কন্ট্রোল যেমন প্লে/পজ/ভলিউম কন্ট্রোল দেখাবে।
• onBuffer এবং onError কলব্যাক ব্যবহার করে ভিডিও প্লেব্যাকের স্টেট ট্র্যাক করতে পারেন।

অডিও এবং ভিডিও প্লেব্যাক কাস্টমাইজেশন

অডিও কাস্টমাইজেশন (react-native-sound)

1. ভলিউম কন্ট্রোল:
   অডিও ফাইলটির ভলিউম কাস্টমাইজ করতে পারেন:

   whoosh.setVolume(0.5); // ভলিউম 0 থেকে 1 এর মধ্যে থাকবে

2. এলপসিং অডিও:
   অডিও বারবার প্লে করতে setNumberOfLoops ব্যবহার করতে পারেন:

   whoosh.setNumberOfLoops(-1); // এটা অডিওকে ইনফিনিট লুপে রাখবে

ভিডিও কাস্টমাইজেশন (react-native-video)

1. অটো-প্লে:
   ভিডিও অটো-প্লে করার জন্য:

   <Video
     source={{ uri: 'https://www.example.com/video.mp4' }}
     autoPlay={true}
     style={styles.backgroundVideo}
   />

2. ভলিউম কন্ট্রোল:
   ভিডিওর ভলিউম কন্ট্রোল করতে:

   <Video
     source={{ uri: 'https://www.example.com/video.mp4' }}
     volume={0.5} // ভলিউম 0 থেকে 1 এর মধ্যে
     style={styles.backgroundVideo}
   />

3. মিউট করা:
   ভিডিও মিউট করতে:

   <Video
     source={{ uri: 'https://www.example.com/video.mp4' }}
     muted={true} // ভিডিও মিউট হবে
     style={styles.backgroundVideo}
   />

সারাংশ

React Native এ অডিও এবং ভিডিও প্লেব্যাক পরিচালনা করার জন্য react-native-sound এবং react-native-video দুটি জনপ্রিয় লাইব্রেরি ব্যবহৃত হয়। এগুলি আপনাকে প্লেব্যাক স্টার্ট, পজ, ভলিউম কন্ট্রোল, কাস্টমাইজেশন, এবং অন্যান্য ফিচারের সুবিধা প্রদান করে।

• react-native-sound অডিও প্লেব্যাকের জন্য ব্যবহার করা হয়।
• react-native-video ভিডিও প্লেব্যাকের জন্য ব্যবহৃত হয়, যেখানে ভিডিও ফাইলগুলি প্লে, পজ, এবং কাস্টমাইজ করা যায়।

এগুলো ব্যবহার করে আপনি অডিও এবং ভিডিও ফাইলগুলি React Native অ্যাপে আরও উন্নতভাবে ব্যবহৃত করতে পারবেন।